<template>
  <ConfigProvider :locale="zhCN">
    <router-view></router-view>
    <!-- <a-float-button
      tooltip="清理缓存，重新登录！"
      :style="{
        right: '50px',
        bottom: '160px',
      }"
      style="background-color: red"
      class="float_btn"
      @click="clearStore"
    >
      <template #icon>
        <div ref="iconWrapperRef" class="icon-wrapper">
          <SyncOutlined />
        </div>
      </template>
    </a-float-button> -->
  </ConfigProvider>
</template>

<script setup lang="ts">
import { ConfigProvider } from 'ant-design-vue'
import { useUserTheme } from './hooks/useTheme'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { useRouter } from 'vue-router'
import { brand, defaultBrand } from '@/hooks/brand.config.ts'
import { useBrandStore } from '@/store/modules/brand'

useUserTheme()
const router = useRouter()

const brandStore = useBrandStore()

let iconWrapperRef = ref()
const clearStore = () => {
  iconWrapperRef.value.classList.add('rotate-animation')
  localStorage.removeItem('token')
  sessionStorage.removeItem('user')

  window.location.reload()
  router.push({ path: '/login' })
}

let flag = ref(true)
const redirectBasedOnDevice = () => {
  console.log('window.location=', window.location)

  const userAgent = navigator.userAgent || navigator.vendor || window.opera

  // 简单判断是否为移动设备（这只是一个基本的判断，可能不够准确）
  const isMobile = /android|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
    userAgent.toLowerCase(),
  )

  if (isMobile) {
    window.location.href = 'http://pdr-h5-v2.liangpiao.net.cn'
  } else {
    window.location.href = 'http://pdr-web.liangpiao.net.cn/#/login'
  }
}

onMounted(() => {

  // if(flag.value){
  //   redirectBasedOnDevice()
  //   flag.value = false
  // }

  const domain = window.location.host
  const customBrand = brand.find(item => {
    return item.domain.includes(domain)
  })
  brandStore.setBrand(customBrand ? customBrand : defaultBrand)
})
</script>

<style>
.rotate-animation {
  animation: rotate-3-times 3s linear forwards;
}

@keyframes rotate-3-times {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1080deg); /* 3圈 * 360度 */
  }
}

.float_btn:hover {
  border-radius: 50%;
  background: red;
}

/*  */
#app {
  height: 100%;
}
.ant-card {
  border-radius: 6px !important;
}

.ant-input,
.ant-btn,
.ant-select,
.ant-input-number,
.ant-picker,
.ant-picker-range,
.a-range-picker,
.ant-input-affix-wrapper,
.ant-alert,
.ant-alert-warning,
.ant-alert-with-description,
.ant-card-body {
  border-radius: 6px !important;
}
.ant-select:not(.ant-select-customize-input) .ant-select-selector {
  border-radius: 6px !important;
}
.ant-pro-sider {
  z-index: 20;
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition-duration: 0.5s;
  transition-property: height, opacity, transform;
  transition-timing-function: cubic-bezier(0.55, 0, 0.1, 1);
  overflow: hidden;
}

.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  transform: translate(2em, 0);
}

.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  transform: translate(-2em, 0);
}

.zoom-enter-active,
.zoom-leave-active {
  animation-duration: 0.3s;
  animation-fill-mode: both;
  animation-name: zoomIn;
}

.zoom-leave-active {
  animation-direction: reverse;
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }

  100% {
    opacity: 1;
  }
}
@keyframes zoomOut {
  0% {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }
}

::-webkit-scrollbar {
  width: 0;
  height: 0;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to right,
    rgb(158, 206, 250) 0%,
    rgb(153, 192, 250) 80%
  ); /* 滚动条渐变色 */
  border-radius: 5px;
}
</style>
